<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/mcInspect.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">创建巡查</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <div class="mcInspect">
            <div class="mcInspect_item">
                <span class="item_span">巡查日期：</span>
                <el-date-picker style="width: 100%"
                                v-model="inspectDate"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">巡检人员：</span>
                <el-input style="width: 100%"
                          placeholder="请输入内容"
                          v-model="inspectPerson"
                          clearable>
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">所属公司：</span>
                <el-select v-model="inspectCompan" @change="getKey" placeholder="请选择" style="width: 100%">
                    <el-option
                            v-for="item in sumCompan"
                            :key="item.code"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">联系方式：</span>
                <el-select v-model="inspectPhontype" placeholder="请选择" style="width: 100%">
                    <el-option
                            v-for="item in phoneType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name">
                    </el-option>
                </el-select>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">{{inspectPhontype}}：</span>
                <el-input style="width: 100%"
                          placeholder="请输入内容"
                          v-model="inspectPhone"
                          clearable>
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">巡查人员身份证信息：</span>
                <el-input style="width: 100%"
                          placeholder="请输入内容"
                          v-model="inspectIdcard"
                          clearable>
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">巡检设备：</span>
                <el-input style="width: 100%"
                          placeholder="请输入内容"
                          v-model="inspectEquipment"
                          clearable>
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">巡检设备类型：</span>
                <el-input style="width: 100%"
                          placeholder="请输入内容"
                          v-model="inspectEquipmenttype"
                          clearable>
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">巡查类容：</span>
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="inspectBreak"
                        maxlength="300"
                        show-word-limit
                >
                </el-input>
            </div>
            <div class="mcInspect_item">
                <span class="item_span">计划巡查日期选择：</span>
                <el-select v-model="inspectId" placeholder="请选择" style="width: 100%">
                    <el-option
                            v-for="item in mcPlanItem"
                            :key="item.id"
                            :label="item.inspectDate"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>

            <div class="mcInspect_item">
                <span class="item_span">CPU状态：</span>
                <el-select v-model="cpuStatus" placeholder="请选择CPU状态" style="width: 100%">
                    <el-option
                            v-for="item in commonItems"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="mcInspect_item">
                <span class="item_span">内存状态：</span>
                <el-select v-model="ramStatus" placeholder="请选择内存状态" style="width: 100%">
                    <el-option
                            v-for="item in commonItems"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="mcInspect_item">
                <span class="item_span">接口状态：</span>
                <el-select v-model="usbStatus" placeholder="请选择接口状态" style="width: 100%">
                    <el-option
                            v-for="item in commonItems"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </div>

            <div class="mcInspect_item">
                <span class="item_span">直接联系可以优惠：</span>
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        maxlength="300"
                        show-word-limit
                        v-model="reamrk"
                >
                </el-input>
            </div>
        </div>
        <el-button type="primary" plain @click="addMcInspect">确 定 添 加</el-button>
        <el-button type="danger" plain @click="isNull">清 空</el-button>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                //巡查日期
                inspectDate: '',
                //巡检人员
                inspectPerson: '',
                //所属公司
                inspectCompan: '',
                //所属公司Id
                inspectCompanid: '',
                //联系方式
                inspectPhontype: '手机',
                //联系电话
                inspectPhone: '',
                //巡查人员身份证信息
                inspectIdcard: '',
                //巡检设备
                inspectEquipment: '',
                //巡检设备类型
                inspectEquipmenttype: '',
                //巡查类容
                inspectBreak: '',
                //巡查Id
                inspectId: '',
                //cpu状态
                cpuStatus: '',
                usbStatus: '',
                ramStatus: '',
                //查询所有公司
                sumCompan: [],
                phoneType: [
                    {
                        id: '0',
                        name: '电话'
                    },
                    {
                        id: '1',
                        name: '手机'
                    },
                    {
                        id: '2',
                        name: '邮箱'
                    },
                ],
                mcPlanItem: [],
                ps: {code: '', name: '', fDisable: ''},
                commonItems: [
                    {value: 0, label: '异常'},
                    {value: 1, label: '正常'}
                ],
                reamrk:'QQ:1845442801,直接对接更快完活'
            }
        },
        //加载事件
        created() {
            //查询公司信息
            axios.get(`/yyds/machine_system/sys-compan/list/1/900/`, {
                params: this.ps
            }).then(resp => {
                this.sumCompan = resp.data.map.items;
            });
            axios.get(`/yyds/machine_system/mc-plan1/get/mcPlan1/id`).then(resp => {
                this.mcPlanItem = resp.data.map.items;
            });
        },
        //函数集群
        methods: {
            //清空按钮
            isNull() {
                //巡查日期
                this.inspectDate = '';
                //巡检人员
                this.inspectPerson = '';
                //所属公司
                this.inspectCompan = '';
                //所属公司Id
                this.inspectCompanid = '';
                //联系方式
                this.inspectPhontype = '手机';
                //联系电话
                this.inspectPhone = '';
                //巡查人员身份证信息
                this.inspectIdcard = '';
                //巡检设备
                this.inspectEquipment = '';
                //巡检设备类型
                this.inspectEquipmenttype = '';
                //巡查类容
                this.inspectBreak = '';
                //本年巡查ID
                this.inspectId = '';
                this.cpuStatus = '';
                this.usbStatus = '';
                this.ramStatus = '';
            },
            //添加
            addMcInspect() {
                if (this.inspectDate === '' || this.inspectPerson === '' || this.inspectCompan === '' ||
                    this.inspectBreak === '' || this.inspectPhone === '' ||
                    this.cpuStatus === '' || this.usbStatus === '' || this.ramStatus === '' ||
                    this.inspectIdcard === '' || this.inspectEquipment === '' || this.inspectEquipmenttype === '') {
                    this.$message({
                        message: '请完善信息',
                        type: 'warning'
                    });
                    return;
                }
                let pid = "0";
                if (this.inspectPhontype === "手机") {
                    pid = "1";
                } else if (this.inspectPhontype === "邮箱") {
                    pid = "2";
                }
                axios.post("/yyds/machine_system/mc-inspect/create", {
                    "inspectDate": this.inspectDate,
                    "inspectPerson": this.inspectPerson,
                    "inspectCompan": this.inspectCompan,
                    "inspectBreak": this.inspectBreak,
                    "inspectPhone": this.inspectPhone,
                    "inspectIdcard": this.inspectIdcard,
                    "inspectEquipment": this.inspectEquipment,
                    "inspectEquipmenttype": this.inspectEquipmenttype,
                    "inspectPhontype": pid,
                    "inspectCompanid": this.inspectCompanid,
                    "inspectPialid": this.inspectId,
                    "cpuStatus": this.cpuStatus,
                    "ramStatus": this.ramStatus,
                    "usbStatus": this.usbStatus,
                }).then(resp => {
                    console.log(resp.data)
                    this.$message({
                        message: '增加成功',
                        type: 'success'
                    });
                    this.isNull();
                })
            },
            getKey(name) {
                for (let i = 0; i < this.sumCompan.length; i++) {
                    if (this.sumCompan[i].name == name) {
                        this.inspectCompanid = this.sumCompan[i].code;
                        break;
                    }
                }
            }
        }
    })
</script>
</body>
</html>